<template>
  <div id="newCustomer" class="newCustomer">
	  <div class="demoImg">
		  <x-img src="/static/ynimg.jpg" class="ximg-demo" container="#vux_view_box_body"></x-img>
	  </div>
    <h3 style="text-align: center">引领右脑朝阳校区欢迎您！</h3>
    <group>
      <x-input required title="姓名" name="name" placeholder="请输入姓名" is-type="china-name" v-model="name"></x-input>
      <x-input required title="手机" name="phone" mask="99999999999" :max="11" is-type="china-mobile" v-model="phone"></x-input>
	    <popup-picker title="性别" :data="list":value-map="[0, 1]" v-model="sex" value-text-align="right"></popup-picker>
	    <datetime class="customerCell" title="生日" value-text-align="right" v-model="birthday"></datetime>
	    <x-input title="推荐人" name="referrer" placeholder="请输入推荐人姓名" v-model="referrer"></x-input>
	    <x-input title="" type="text" placeholder="请输入验证码" v-model="code" required>
		    <x-button slot="right" type="primary" mini :disabled="getCode.disabled" @click.native="handleGetCode" style="width: 100px;">{{getCode.txt}}</x-button>
	    </x-input>
    </group>
	  <div class="error" v-show="error">{{error}}</div>
	  <x-button class="buttonCustomer" type="primary" action-type="button" @click.native="createCustomer">免费领取试听课</x-button>
  </div>
</template>

<script>
	import NetWorking from '../../utils/networking'
  import {Group, XInput, XButton, Cell, Datetime, PopupPicker, XImg } from 'vux'
  export default {
    name: "newCustomer",
    components:{
	    XImg,
      Group,
      XInput,
      XButton,
      Cell,
	    Datetime,
	    PopupPicker,
    },
    data() {
    	return {
		    getCode: {
			    txt: '获取验证码',
			    disabled: false,
		    },
		    code: '', //验证码
		    hashcode:'',
		    show: false,
		    name: '',
		    phone: '',
		    birthday: '',
		    teacher: '',
		    sales: '',
		    sexValue: true,
		    status: 0,
		    sex: ['男'],
		    list: [['男', '女']],
		    userListTitle: '用户列表',
		    objectList: [],
		    objectListValue: [],
		    error: '',
		    referrer: ''
	    }
    },
	  watch: {
		  sex: function () {
			  if(this.sex[0] == '男'){
			  	this.sexValue = true
			  }else{
			  	this.sexValue = false
			  }
		  }
	  },
    methods: {
	    handleGetCode() {
		    if(this.phone) {
			    this.getCode.disabled = true;
			    this.getCode.txt = '获取中...';
			    let seconds = 60;
			    let self = this;
			    let time = setInterval(function() {
				    --seconds;
				    self.getCode.txt = seconds + 's';
				    if(seconds <= 0) {
					    clearInterval(time);
					    self.getCode.disabled = false;
					    self.getCode.txt = '获取验证码';
				    }
			    }, 1000)

			    NetWorking.doGet('auth/verifycode',
				    null,
				    {
					    params: {
						    phoneNumber: this.phone
					    },
				    }
				    )
				    .then(
					    response =>
					    {
						    let res = response.data

						    if (res.error_code == 0)
						    {
							    //this.$store.dispatch('createToken', res.token)
							    //location.assign('/edu/mavinTeacher.html')
							    //location.assign('../../edu/mavinTeacher.html')
							    this.hashcode = res.hashcode
						    }
						    else
						    {
							    this.error = res.error_message
						    }

					    },
					    (message) => {
						    window.alert(message)
						    this.hideLoading()
					    }
				    )
		    } else {
			    this.error = "请确认手机填入正确"
		    }
	    },
      createCustomer: function () {

      	if(this.name == '' || this.phone == '' || this.code == ''){
		      this.error = "请确认必填项输入正确"
		      return
	      }

        let _this = this
      	NetWorking.doPost(
      		'marketing/potentialCustomerRollIn',
		      null,
		      {
		      	name: this.name,
			      phone: this.phone,
			      sex: this.sexValue,
			      birthday: this.birthday,
			      status: this.status,
			      referrer_obsolete: this.referrer
		      },
		      {
			      params: {
				      "code": this.code,
				      "hashcode": this.hashcode
			      }
		      }
	      ).then(
	      	response => {
	      		let rs = response.data
			      if(rs.error_code == 0){
				      this.$router.push({ name: 'thanksPage'})
			      }else if(rs.error_code == 20016){
	      			alert('该手机号已存在')
			      }else if(rs.error_code == 20002){
	      			alert('手机号或验证码不正确，请重试')
			      }else{
				      alert(rs.error_message);
			      }
		      }
	      )
      }
    }
  }
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

  .newCustomer {
    margin-left: 5px;
    margin-right: 5px;
	  margin-bottom: 100px;
  }
  .buttonCustomer {
    border-radius: 25px;
	  margin-top: 15px;
	  margin-bottom: 10px;
	  width: 90% !important;
  }

	.customerCell {
		height: 1.41176471em !important;
		line-height: 1.41176471 !important;
		text-decoration: none;
	}

	.weui-cell__bd {
		text-align: left;
	}

	.ximg-demo {
		width: 60%;
		height: auto;
		margin-top: 0px;
	}

	.demoImg {
		text-align: center;
	}
</style>
